<template>
  <div>
    <el-container>
      <el-header>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" style="float:right">
          <el-menu-item index="1" @click="toFrontIndexPage">首页</el-menu-item>
          <el-menu-item index="2" v-if="isLogin==false"  @click="toLoginPage">登录</el-menu-item>
          <el-menu-item index="3" v-if="isLogin==false" @click="toRegisterPage">注册</el-menu-item>
          <el-submenu v-if="isLogin==true" index="4">
            <template v-if="isLogin==true" slot="title">个人中心</template>
            <el-menu-item @click="toFrontUserProfilePage"  v-if="isLogin==true" index="4-1">基本信息</el-menu-item>
            <el-menu-item @click="toFrontRecordListPage"  v-if="isLogin==true" index="4-2">生成记录</el-menu-item>
            <el-menu-item @click.native="logout" v-if="isLogin==true" index="4-3">Logout</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-header>

      <el-main >
          <div style='font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
'>功能介绍 </div>
          <el-divider></el-divider>
          <div style='font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
 '>基于人物形象训练已经得到的形象，可以继续通过人物生成写真模型完成该形象的写真生成，支持多种预设风格，包括证件照、商务写真等。
 </div>
          <el-divider></el-divider>

          <div style='font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
'>输入图像</div>
          <el-divider></el-divider>

          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>

          <el-divider></el-divider>
          <div style='font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
          '>选择模板</div>

          <el-divider></el-divider>
          <el-row :gutter="10">
            <el-col :span="4" >
              <el-image class="hover-img" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :fit="fit"></el-image>
              <el-col style="text-align:center">
                <el-button plain>证件照</el-button>
              </el-col>
            </el-col>
            <el-col :span="4">
              <el-image class="hover-img" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :fit="fit"></el-image>
              <el-col style="text-align:center">
                <el-button plain>证件照</el-button>
              </el-col>
            </el-col>
            <el-col :span="4">
              <el-image class="hover-img" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :fit="fit"></el-image>
              <el-col style="text-align:center">
                <el-button plain>证件照</el-button>
              </el-col>
            </el-col>
            <el-col :span="4">
              <el-image class="hover-img" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :fit="fit"></el-image>
              <el-col style="text-align:center">
                <el-button plain>证件照</el-button>
              </el-col>
            </el-col>
            <el-col :span="4">
              <el-image class="hover-img" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :fit="fit"></el-image>
              <el-col style="text-align:center">
                <el-button plain>证件照</el-button>
              </el-col>
            </el-col>
          </el-row>

          <el-row :gutter="10">
            <el-col :span="4">
              <el-image class="hover-img" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :fit="fit"></el-image>
              <el-col style="text-align:center">
                <el-button plain>证件照</el-button>
              </el-col>
            </el-col>
            <el-col :span="4">
              <el-image class="hover-img" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :fit="fit"></el-image>
              <el-col style="text-align:center">
                <el-button plain>证件照</el-button>
              </el-col>
            </el-col>
            <el-col :span="4">
              <el-image class="hover-img" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :fit="fit"></el-image>
              <el-col style="text-align:center">
                <el-button plain>证件照</el-button>
              </el-col>
            </el-col>
            <el-col :span="4">
              <el-image class="hover-img" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :fit="fit"></el-image>
              <el-col style="text-align:center">
                <el-button plain>证件照</el-button>
              </el-col>
            </el-col>
            <el-col :span="4">
              <el-image class="hover-img" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" :fit="fit"></el-image>
              <el-col style="text-align:center">
                <el-button plain>证件照</el-button>
              </el-col>
            </el-col>
          </el-row>

          <el-divider></el-divider>
          <el-button type="primary">确认生成</el-button>
          <el-divider></el-divider>


      </el-main>

      <el-footer style='text-align:center;font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
'>@2024-2025 YOUYOU-AI</el-footer>
    </el-container>


  </div>
</template>


<script>
import { getToken } from '@/utils/auth'
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        dialogImageUrl: '',
        dialogVisible: false,

        //isLogin : getToken()
        isLogin :("undefined".indexOf(getToken())!==-1) ? false :true
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
       handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },

      toLoginPage(){
        this.$router.push("/login" );
      },
      toRegisterPage(){
        this.$router.push("/register" );
      },
      toFrontIndexPage(){
        this.$router.push("/" );
      },
      toFrontUserProfilePage(){
        this.$router.push("/front/user" );
      },
      toFrontRecordListPage(){
        this.$router.push("/front/frontRecord" );
      },

      async logout() {
        this.$confirm('确定注销并退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('LogOut').then(() => {
            location.href = '/index';
          })
        }).catch(() => {});
      }
    }
  }
</script>


<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

 .hover-img {
       transition: transform 0.3s ease; /* 过渡效果，让放大过程更平滑 */
     }
.hover-img:hover {
     transform: scale(1.02); /* 鼠标悬停时，图片放大1.1倍 */
   }
</style>
